import React, { useState, useEffect } from "react";
import { useDidShow } from "@tarojs/taro";
import { View, Text } from "@tarojs/components";
import F2 from "@antv/f2";
import F2Canvas from "../../components/F2Canvas";
// import WXF2 from "@antv/wx-f2";
import {
  AtNoticebar,
  AtTabs,
  AtTabsPane,
  AtCard,
  AtActivityIndicator,
} from "taro-ui";
import { useSelector, useDispatch } from "react-redux";
import LineChart from "../../components/LineChart";
import "./index.scss";

export default () => {
  const dispatch = useDispatch();
  const { list, noticeType } = useSelector((state) => state.message);
  const loading = useSelector((store) => store.loading);
  const [current, setCurrent] = useState(0);
  const [lineList, setLineList] = useState([]);
  const tabList = [
    { title: "公告", noticeType: 1 },
    { title: "通知", noticeType: 2 },
    { title: "统计", noticeType: 3 },
  ];
  useDidShow(() => {
    dispatch({
      type: "message/questMassage",
    });
  });

  console.log("list", list);
  const handleClick = (val) => {
    console.log(tabList[val]);
    setCurrent(val);
    dispatch({
      type: "message/overrideStateProps",
      payload: {
        noticeType: tabList[val].noticeType,
      },
    });
    dispatch({
      type: "message/questMassage",
    });
  };
  const notice = `${list[0]?.noticeTitle || ""}  ${list[0]?.createBy || ""}  ${
    list[0]?.createTime || ""
  }`;
  const config0R = {
    id: "confi02",
    data: list,
    xField: "createTime",
    yField: "value",
    color: "#2FC25B",
  };
  console.log("list", list);
  const initChart = (config) => {
    const chart = new F2.Chart(
      Object.assign(config, {
        appendPadding: [10, 15, 10, 15],
        // 预留展示tooltip高度
        padding: [40, "auto", "auto"],
      })
    );

    // Step 2: 载入数据源
    chart.source(list, {
      value: {
        tickCount: 5,
        min: 0,
      },
      date: {
        type: "timeCat",
        range: [0, 1],
        tickCount: 3,
      },
    });
    chart.tooltip({
      showCrosshairs: true,
      showItemMarker: false,
      onShow: function onShow(ev) {
        const items = ev.items;
        items[0].name = null;
        items[0].value = items[0].origin.noticeTitle;
      },
    });

    // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
    chart
      .line()
      .position(`${config0R.xField}*${config0R.yField}`)
      .color(config0R.color || "#2FC25B");

    // Step 4: 渲染图表
    chart.render();
    return chart;
  };
  const opts = {
    onInit: initChart,
  };
  const onInitChart = (F2, config) => {
    const chart = new F2.Chart(config);
    const data = [
      { value: 63.4, city: "New York", date: "2011-10-01" },
      { value: 62.7, city: "Alaska", date: "2011-10-01" },
      { value: 72.2, city: "Austin", date: "2011-10-01" },
      { value: 58, city: "New York", date: "2011-10-02" },
      { value: 59.9, city: "Alaska", date: "2011-10-02" },
      { value: 67.7, city: "Austin", date: "2011-10-02" },
      { value: 53.3, city: "New York", date: "2011-10-03" },
      { value: 59.1, city: "Alaska", date: "2011-10-03" },
      { value: 69.4, city: "Austin", date: "2011-10-03" },
    ];
    chart.source(data, {
      date: {
        range: [0, 1],
        type: "timeCat",
        mask: "MM-DD",
      },
      value: {
        max: 300,
        tickCount: 4,
      },
    });
    chart.area().position("date*value").color("city").adjust("stack");
    chart.line().position("date*value").color("city").adjust("stack");
    chart.render();
    // 注意：需要把chart return 出来
    return chart;
  };
  return (
    <>
      <AtActivityIndicator
        isOpened={loading.effects["message/questMassage"]}
        mode="center"
        size={32}
        content="加载中..."
      ></AtActivityIndicator>
      <View className="index">
        <AtNoticebar marquee icon="volume-plus">
          {notice}
        </AtNoticebar>
        <AtTabs current={current} tabList={tabList} onClick={handleClick}>
          <AtTabsPane current={current} index={0}>
            <F2Canvas
              id="confi02"
              style={{ width: "100%", height: "200px" }}
              //   onInit={initChart}
              opts={opts}
              chartList={list}
            ></F2Canvas>
          </AtTabsPane>
          <AtTabsPane current={current} index={1}>
            {list.length > 0
              ? list?.map((item) => {
                  return (
                    <AtCard
                      note={item.createTime}
                      extra={`${item.createBy}`}
                      title={item.noticeTitle}
                      style={{ marginTop: "2px" }}
                      key={item.mesId}
                    >
                      {item.content}
                    </AtCard>
                  );
                })
              : null}
          </AtTabsPane>
          <AtTabsPane current={current} index={2}>
            {list.length > 0
              ? list?.map((item) => {
                  return (
                    <AtCard
                      note={item.createTime}
                      extra={`${item.createBy} `}
                      title={item.noticeTitle}
                      style={{ marginTop: "2px" }}
                      key={item.mesId}
                    >
                      {item.content}
                    </AtCard>
                  );
                })
              : null}
          </AtTabsPane>
          <AtTabsPane current={current} index={3}>
            {/* <F2Canvas
              id="confi02"
              style={{ width: "100%", height: "200px" }}
              onInit={initChart}
              chartList={list}
            ></F2Canvas> */}
          </AtTabsPane>
        </AtTabs>
      </View>
    </>
  );
};
